<template>
	<view class="page">
		<nav-header title="我的邀请" :show-right="false"></nav-header>
		<view class="" v-for="(group, index) in groupedData" :key="index" v-if="groupedData && groupedData.length>0">
			<up-divider :text="group.date" textSize="12" lineColor="#E9EAEB" textColor="#A4A7AE"></up-divider>
			<view class="" v-for="item 	in group.items" :key="item.id" >
				<view class="content">
					<view class="avr">
						<head-image :url="item.data.head_image" :name="item.data.nick_name" :size="96"></head-image>
					</view>
					<view class="message">
						<view class="top">
							<view>
								<text class="text-md-Medium nickName">{{item.data.nick_name}}</text>
							</view>
							<view>
								<text class="text-lg-Medium price">+{{item.content.price}}元</text>
							</view>
						</view>
						<view class="text-sm-Regular tip">
							<text v-if="item.type==0">
								成为了你的下级
							</text>
							<text v-if="item.type==1">
								创建了 <text class="company">{{item.data.company_name}}</text>
							</text>
						</view>
						<view>
							<text class="text-sm-Regular time">{{item.createTime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<up-divider :dot="true" v-else></up-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shareData: {
					list: []
				},
				groupedData: []
			}
		},
		methods: {
			getData() {
				this.$http({
					url: "/share/list",
					method: "GET",
					data: {
						pageSize: this.shareData && this.shareData.pageSize || 20,
						pageNum: this.shareData && this.shareData.pageNum || 1,
					}
				}).then(res => {
					const list = this.shareData && this.shareData.list || []
					list.push(...res.list)
					res.list = list
					this.shareData = res
					this.shareData.list.forEach(item => {
						item.diviTime = item.createTime.slice(0, 10)
					})
					this.groupDataByDate(this.shareData.list);
				})
			},
			groupDataByDate(list) {
				const grouped = {}
				list.forEach(item => {
					const date = item.diviTime
					if (!grouped[date]) {
						grouped[date] = []
					}
					grouped[date].push(item)
				})
				this.groupedData = Object.keys(grouped).map(date => ({
					date: date,
					items: grouped[date]
				}));
			}
		},
		onLoad() {
			this.getData()
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 24rpx 32rpx;
		display: flex;
		// align-items: center;
		background-color: #fff;
		gap: 16rpx;
		border-bottom: 1rpx solid $gray-100;

		.message {
			width: 100%;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					color: $success-500;
				}
			}

			.nickName {
				color: $gray-900;
			}

			.tip {
				color: $gray-600;

				.company {
					color: $brand-500;
				}
			}

			.time {
				color: $gray-400;
			}
		}
	}
</style>